<template>
  <el-dialog v-model="detailVisible" :destroy-on-close="true" title="详情" width="860" custom-class="no-header-dialog">
    <div class="detail-box">
      <el-card class="detail">
        <template #header>详情</template>
        <p>
          <span>对象：</span><span class="value">{{ modalForm.user_name }}</span>
        </p>
        <p>
          <span>访问IP：</span><span class="value">{{ modalForm.ip_address }}</span>
        </p>
        <p>
          <span>任务：</span><span class="value">{{ modalForm.operation_name }}</span>
        </p>
        <p>
          <span>操作请求ID：</span><span class="value">{{ modalForm.request_id }}</span>
        </p>
        <p>
          <span>状态：</span><span class="value">{{ status[modalForm.status?.toLowerCase()] }}</span>
        </p>
        <p>
          <span>操作时间：</span><span class="value">{{ moment(modalForm.created_at).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </p>
        <p>
          <span>更新时间：</span><span class="value">{{ moment(modalForm.updated_at).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </p>
        <p>
          <span>任务类型ID：</span><span class="value">{{ modalForm.operation_id }}</span>
        </p>
        <p>
          <span>对象ID：</span><span class="value">{{ modalForm.object_uuid }}</span>
        </p>
        <p>
          <span>对象类型：</span><span class="value">{{ modalForm.object_type }}</span>
        </p>
        <p>
          <span>项目：</span><span class="value">{{ modalForm.res_org_name }}</span>
        </p>
      </el-card>
      <el-card class="detail">
        <template #header>原始数据</template>
        <json-viewer v-if="modalForm.origin_data" :value="modalForm.origin_data" :expand-depth="0"></json-viewer>
      </el-card>
      <el-card class="detail">
        <template #header>预期数据</template>
        <json-viewer v-if="modalForm.expected_data" :value="modalForm.expected_data" :expand-depth="0"></json-viewer>
      </el-card>
      <el-card class="detail">
        <template #header>结果数据</template>
        <json-viewer v-if="modalForm.result_data" :value="modalForm.result_data" :expand-depth="0"></json-viewer>
      </el-card>
    </div>
    <template #footer>
      <div class="modal-footer">
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="detail">
import { ref } from "vue";
import moment from "moment";
import JsonViewer from "vue-json-viewer";
import { getCloudLogDetail } from "@/api/modules/sysManagement/logManagement";
const detailVisible = ref<any>();
const rowData = ref<any>({});
const modalForm = ref<any>({});
const status = ref<any>({
  success: "成功",
  error: "失败",
  running: "执行中"
});
const getDetail = async () => {
  const { data } = await getCloudLogDetail({ uuid: rowData.value.uuid });
  modalForm.value = data;
};
const openDialog = data => {
  detailVisible.value = true;
  rowData.value = data;
  getDetail();
};
const closeDialog = () => {
  detailVisible.value = false;
};
defineExpose({
  openDialog,
  closeDialog
});
</script>

<style lang="scss" scoped>
.detail-box {
  max-height: 600px;
  overflow-y: auto;
}
.modal-footer {
  margin-top: 10px;
  text-align: right;
}
.detail {
  width: 99%;
  margin-bottom: 10px;
  p {
    float: left;
    width: 50%;
    margin-bottom: 10px;
    font-size: 12px;
    span {
      display: inline-block;
    }
  }
  :deep(.el-card__body) {
    display: inline-block;
    padding-bottom: 10px;
  }
}
</style>
